<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>限流规则添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <script type="text/javascript" src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style>
        body {
            background-color: #ffffff;
        }
        label.required:after {
        	  content:'*';
        	  color:red;
        }   
        .delbtn{
            position: relative;
            display: inline-block;
            background: #FFB800;
            border: 1px solid #FFB800;
            border-radius: 2px;
            padding: 4px 12px;
            overflow: hidden;
            color: #FFFFFF;
            text-decoration: none;
            text-indent: 0;
            line-height: 27px;
            width:92px;
        }             
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <blockquote class="layui-elem-quote layui-text">
            任务添加帮助文档及注意事项”：1. <a href="#" target="_blank">帮助文档1</a> 2. <a href="#" target="_blank">帮助文档2？</a>
        </blockquote>
        <form class="layui-form layui-form-pane"  action="">
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">选项</label>
                <div class="layui-input-block">
                    <input type="radio" name="rangetype" value="url" lay-filter="rangetype" title="局部URL" checked="">
                    <input type="radio" name="rangetype" value="all" lay-filter="rangetype" title="全局">
                </div>
            </div>

            <div class="layui-form-item" pane="">
                <label class="layui-form-label">域名</label>
                <div class="layui-input-inline" style="width:300px">  
                    <input type="text" name="limit_host" placeholder="可为空" value="" lay-verify="" lay-reqtext="" class="layui-input">
                </div> 
                <div class="layui-form-mid layui-word-aux">当nginx有多个域名,只需针对某个域名限流时填写</div>
            </div> 
 
            <div class="layui-form-item" pane="" id="rangeUrlTpl">
                <label class="layui-form-label">URL</label>
                <div class="layui-input-inline" style="width:300px">  
                    <input type="text" name="limit_url" placeholder="URL[支持正则]" value="" lay-verify="" lay-reqtext="不能为空" class="layui-input">
                </div> 
            </div> 
  
            <div class="layui-form-item">
                <label class="layui-form-label">限流类型</label>
                <div class="layui-input-inline" style="width:300px"> 
                    <select name="limit_type" id="limit_type">
	              			<option value="ip" selected="">IP</option>
	              			<option value="cip">C段IP</option>
	              			<option value="ipuri">单IP单URI</option>
	              			<option value="useragent">UserAgent</option>
	              			<option value="referer">Referer</option>
	              			<option value="args">Args</option>
	              			<option value="all">ALL</option>
    		            </select>
                </div>
            </div>
            <div class="layui-form-item" pane="">     
                <label class="layui-form-label">限流对象</label>         
                <div class="layui-input-inline" style="width:300px">
                    <input type="text" name="limit_key" id="limit_key" placeholder="限流关键字" value="" class="layui-input">
                </div>  
                <div class="layui-form-mid layui-word-aux">可以为空,Args类型除外</div>
            </div>
            <div class="layui-form-item" pane="">    
                <label class="layui-form-label"><span style="color:red">*</span>qps阀值</label>                                               
                <div class="layui-input-inline" style="width:300px">
                    <input type="text" name="limit_rate" id="limit_rate" placeholder="20[请求/秒]" value="50" class="layui-input">
                </div>
            </div>     
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-inline" style="width:300px">  
                    <input type="text" name="remarks" value="" class="layui-input">
                </div> 
            </div>                    
            <div class="layui-form-item" style="margin-top: 20px;">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认添加</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table;
            $ = layui.$;
            
    form.verify({
        limit_rate: [
          /^\d+\/\d+$/
          ,"格式不对,eg:100/60!"
        ]
    });

        $("#rangeUrlTpl").show();
        form.on('radio(rangetype)', function (data) { 
            console.log(data.value);
            if(data.value == 'all'){
              $("#rangeUrlTpl").hide();   
            }else{
              $("#rangeUrlTpl").show();                            
            }  
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
          
                  //var re = /^\d+\/\d+$/;
                  //var re = /^[1-9][0-9]{0,}\/[1-9][0-9]{0,3}$/;
                  //var re = /^[1-9][0-9]{0,5}$/;
                  var re = /^\d*\.?\d+$/;
                  if (re.test(data.field.limit_rate)){
                      console.log("ok");
                  } else {
                      layer.msg("阀值格式不对需大于0的整数或小数,eg:1.25!",{icon:2});
                      return false;
                  }
                if (data.field.rangeurl == "all" || data.field.limit_url == "" ) {
                  data.field.limit_url = "/"
                }
                if (data.field.limit_type == "args" && data.field.limit_key == "") {
                      layer.msg("args类型时,限流对象不能为空!",{icon:2});
                      return false;
                }
                data.field.limit_host = data.field.limit_host.replace(/^\s*|\s*$/g,""); //替换空格
                data.field.limit_url = data.field.limit_url.replace(/^\s*|\s*$/g,""); //替换空格
					      console.log(data.field);                            
			          layer.confirm('确定添加?', {icon: 3, title:'提示',yes: function(index){
                     var index2 = layer.load(0, {shade: false});
                     layer.msg('此处需运行3-5s左右');
                     $.ajax({
                       url: "/xwaf/reqlimit/rule/Add"+ location.search,
                       type: "post",
                       data: JSON.stringify(data.field),
                       dataType: "json",
                       success: function (resp) {
                                layer.close(index2);
                                 if(resp.code == 0){
                                    layer.msg('添加成功', {icon: 1});
                                 }else{
                                    layer.msg(resp.msg,{icon:2});
                                 }
                        }
                      });		  	  
                  },
                  cancel: function(index, layero){ 
                    layer.close(index);
                    layer.close(index2);
		                console.log("不操作");
                  } 
                });
              return false;
        });

    });

</script>
</body>
</html>